<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="active" finish-status="success">
          <el-step title="新建发放工资单"></el-step>
          <el-step title="核对人员工资"></el-step>
          <el-step title="选择工资单显示"></el-step>
          <el-step title="发放工资条"></el-step>
        </el-steps>
      </div>
      <div class="text item">
        <el-button v-if="3 > active > 0" style="margin-top: 12px" @click="next"
          >下一步</el-button
        >
        <el-button v-if="0 < active <= 3" style="margin-top: 12px" @click="up"
          >上一步</el-button
        >
        <el-button
          v-if="active == 3 && pay == true"
          style="margin-top: 12px"
          @click="payAlls"
          >发放</el-button
        >
        <el-button
          v-if="active == 3 && allPay == true"
          style="margin-top: 12px"
          @click="payAll"
          >全部发放</el-button
        >
        <!-- 第一步 -->
        <el-form
          v-if="active == 0"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="30%"
          class="form"
        >
          <el-form-item label="薪资方案" prop="method">
            <el-select
              v-model="ruleForm.method"
              class="form-select"
              placeholder="请选择薪资方案"
              @change="xzChange"
            >
              <el-option
                v-for="(i, index) in sort"
                :key="index"
                :label="i.name"
                :value="i._id"
              ></el-option>
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="计薪周期" prop="week">
            {{
              this.$moment(
                this.$moment()
                  .month(this.$moment().month())
                  .startOf("month")
                  .valueOf()
              ) | dates
            }}
            至
            {{
              this.$moment(
                this.$moment()
                  .month(this.$moment().month())
                  .endOf("month")
                  .valueOf()
              ) | dates
            }}
          </el-form-item>
          <el-form-item label="发放月份" prop="payMonth">
            <el-date-picker
              type="month"
              placeholder="选择日期"
              v-model="ruleForm.payMonth"
              style="width: 100%"
              @change="monthChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="工资单名称" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入"
              @change="nameChange"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 第二步 -->
        <el-table
          v-if="active == 1"
          :data="ruleForm.xzStaff"
          border
          :summary-method="getSummaries"
          show-summary
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="id" type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="organ" label="部门">
            <template slot-scope="scope">
              {{ scope.row.stationId.name }}
            </template>
          </el-table-column>
          <el-table-column prop="station" label="岗位">
            <template slot-scope="scope">
              {{ scope.row.organId.name }}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号码"> </el-table-column>
          <el-table-column prop="_id" label="工号"> </el-table-column>
          <el-table-column prop="sid" label="证件号"> </el-table-column>
          <el-table-column prop="basic" label="基本工资"> </el-table-column>
          <el-table-column prop="post" label="岗位工资"> </el-table-column>
          <el-table-column prop="dut" label="职位工资"> </el-table-column>
        </el-table>
        <!-- 第三步 -->
        <el-form
          v-if="active == 2"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="form3"
        >
          <el-form-item label="发放模板:" prop="mb" class="mbs">
            <div
              v-for="i in methods"
              :key="i._id"
              :class="cname"
              :id="i._id"
              @click="setModel(i)"
              @mouseenter="enterEve"
              @mouseleave="leaveEve"
            >
              <p>{{ i.name }}</p>
              <span
                >薪资项目：{{
                  Object.values(i.showSet).reduce((old, now) => {
                    return old + now.length;
                  }, 0)
                }}项</span
              >
            </div>
          </el-form-item>
          <el-form-item label="模板名称:" prop="mbname">
            <el-input
              placeholder="请输入"
              v-model="ruleForm.mbname"
              class="form3_select"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="可见工资项:">
            <span class="span1">可以对薪资项和薪资分组进行移动</span>
          </el-form-item> -->
        </el-form>
        <!-- 第四步 -->
        <el-table
          v-if="active == 3"
          :data="ruleForm.xzStaff"
          border
          :summary-method="getSummaries"
          show-summary
          style="width: 100%; margin-top: 20px"
          @select-all="allRow"
          @select="rowOne"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="organ" label="部门">
            <template slot-scope="scope">
              {{ scope.row.stationId.name }}
            </template>
          </el-table-column>
          <el-table-column prop="station" label="岗位">
            <template slot-scope="scope">
              {{ scope.row.organId.name }}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号码"> </el-table-column>
          <el-table-column prop="_id" label="工号"> </el-table-column>
          <el-table-column prop="sid" label="证件号"> </el-table-column>
          <el-table-column prop="basic" label="基本工资"> </el-table-column>
          <el-table-column prop="post" label="岗位工资"> </el-table-column>
          <el-table-column prop="dut" label="职位工资"> </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "APIAddgrant",

  data() {
    return {
      xzStaffs: [],
      pay: true,
      allPay: true,
      xzContent: "",
      showArray: [],
      cname: "card_content",
      sort: [],
      methods: [],
      active: 0,
      ruleForm: {
        name: "",
        method: "",
        payMonth: "",
        mbname: "",
        xzStaff: [],
      },
      rules: {
        method: [
          { required: true, message: "请输选择薪资方案", trigger: "blur" },
        ],
        week: [{ required: true, trigger: "focus" }],
        payMonth: [
          { required: true, message: "请选择发放月份", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请填写工资单名称", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.getSort();
    this.getMethod();
  },

  methods: {
    rowOne(selection, row) {
      console.log(selection, row, "勾选");
      if (selection.length == 0) {
        this.xzStaffs = this.ruleForm.xzStaff
        console.log(selection.length, "length");
        this.allPay = true;
        this.pay = true;
      } else if (this.ruleForm.xzStaff.length > selection.length > 0) {
        this.xzStaffs = selection;
        this.allPay = false;
        this.pay = true;
      } else if (selection.length == this.ruleForm.xzStaff.length) {
        this.xzStaffs = selection;
        this.allPay = true;
        this.pay = false;
      }
    },
    allRow(selection) {
      console.log(selection, "全勾选");
    },
    async payAlls() {
      this.xzStaffs.map((i) => {
        i.grant = 1;
      });
      let {
        data: { code, msg },
      } = await axios.post("/xz/addPaymoney", this.ruleForm);
      if (code == 200) {
        this.$message.success(msg);
        this.$router.push("/home/grant");
      }
    },
    async payAll() {
      console.log(this.ruleForm);
      this.ruleForm.xzStaff.map((i) => {
        i.grant = 0;
      });
      console.log(this.ruleForm.xzStaff);
      let {
        data: { code, msg },
      } = await axios.post("/xz/addPaymoney", this.ruleForm);
      if (code == 200) {
        this.$message.success(msg);
        this.$router.push("/home/grant");
      }
    },
    nameChange(e) {
      this.ruleForm.name = e;
    },
    monthChange(e) {
      console.log(e);
      this.ruleForm.payMonth = e;
    },
    async xzChange(e) {
      this.xzContent = e;
      let { data } = await axios.get("/xz/getxzStaff?method=" + e);
      console.log(data, "薪资人员");
      this.ruleForm.xzStaff = data;
    },
    setModel(i) {
      console.log(i);
      console.log(Object.values(i.showSet), "Object.values(i.showSet)");
      let Obj = Object.values(i.showSet);
      Obj.map((j) => {
        j.map((m) => {
          this.showArray.push(m);
        });
      });
      this.ruleForm.mbname = i.name;
    },
    enterEve(e) {
      e.target.className = "card_content1";
    },
    leaveEve(e) {
      e.target.className = "card_content";
    },
    async getMethod() {
      let { data } = await axios.get("/xz/getMb");
      console.log(data, "薪资方案");
      this.methods = data;
    },
    async getSort() {
      let { data } = await axios.get("/xz/getSort");
      this.sort = data;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        console.log(values);
        if (
          !values.every((value) => isNaN(value)) &&
          values.every((value) => value.toString().length < 6)
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    up() {
      if (this.active-- > 0) this.active;
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 50%;
  margin: 20px auto auto auto;
}
.form-select {
  width: 100%;
}
.form3_select {
  width: 30%;
}
.span1 {
  color: #d7d7d7;
}
.form3 > .el-form-item > .el-form-item__content {
  display: flex;
  flex-wrap: wrap;
}
.card_content {
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgb(170, 167, 167);
  width: 350px;
  margin: 0px 20px 20px 80px;
  word-break: break-all;
  float: left;
  padding-left: 20px;
}
.card_content > p {
  font-size: 25px;
  color: #657180;
}
.card_content1 {
  background: white;
  border-radius: 10px;
  color: #3091f2;
  box-shadow: 0px 0px 5px 0px #3091f2;
  width: 350px;
  margin: 0px 20px 20px 80px;
  word-break: break-all;
  float: left;
  padding-left: 20px;
}
.card_content1 > p {
  font-size: 25px;
}
.mbs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.mbs > .el-form-item__content {
  width: 100%;
}
</style>